<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嘉号门店系统业务数据平台</title>
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="/dp//css/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" type="text/css" href="/dp/css/reset.css">
    <link rel="stylesheet" type="text/css" href="/dp/layer/css/layui.css">
    <link rel="stylesheet" href="/dp/css/swiper-bundle.min.css">
    <link rel="stylesheet" type="text/css" href="/dp/css/index.css">
    
</head>
<body>
    <div class="topbg">
        嘉号门店系统业务数据平台
    </div>
    <div id="app" v-cloak>
        <div class="sjdq">
            <p class="rqxs">
                <span id="currentDate"></span>
                <span id="currentDay"></span>
            </p>
            <p class="timew" id="currentTime"></p>
        </div>
        <div class="XZQY">
            <el-select v-model="value" placeholder="全部地区" @change="changeRegion">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
        </div>
        <div class="p125">
            <div class="f w75p">
                <div class="f w324">
                    <div class="combt">业务人员发展门店数据走势</div>
                    <div id="main"></div>
                    <div class="kksl" >
                        <div class="combt">门店销售top10</div>
                        <div class="xssj">
                            <div class="myscroll">
                                <ul>
                                    <li class="dfl" v-for="(item,key) in mdarr">
                                        <div class="topw">TOP{{key+1}}</div>
                                        <div class="jdte">
                                            <div class="f mdname">{{item.shop_name}}</div>
                                            <div class="r mdname">{{item.order_num}}</div>
                                            <div class="c"></div>
                                            <div class="jdtzs">
                                                <el-progress :percentage="80" color="#009EDA" status="exception"></el-progress>
                                            </div>
                                        </div>
                                    </li>
                       
                                </ul>
                            </div>
                            
                            
                            
                            <div class="c"></div>
                        </div>
                        <div id="main12"></div>
                    </div>
                    <div class="kksl" >
                        <div class="combt">业务人员发展门店数量排名</div>
                        
                        <div id="main15">
                            <div class="dfl">
                                <p class="paimin" style="margin-left: 46px;">排名</p>
                                <p class="paiminxm">姓名</p>
                                <p class="paiminxm1">发展数量</p>
                            </div>
                            <div class="">
                                <div class="myscroll2">
                                  
                                    <ul class="infoList">
                                        <li v-for="(item,key) in mdsldata">
                                            <div class="dfl">
                                                <div class="paimin">No.{{key+1}}</div>
                                                <div class="paiminxm">{{item.name}}</div>
                                                <div class="paiminxm1">{{item.shop_count}}家</div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                           
                        </div>
                    </div>
                </div>
                <div class="r w67p">
                    <div class="fybg dfl">
                        <div class="fyitem"  v-for="(item,key) in fyliast" :key="key">
                            <div class="fyname">{{item.title}}</div>
                            <div class="sjig">
                                <span class="sjig">{{splitByDot(item.money)[0]}}元</span>
                                <span class="sjig1">.{{splitByDot(item.money)[1]}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="mdsl dfl">
                        <div class="mditem"  v-for="(item,key) in mdslarr" :key="key">
                            <div class="namrer">{{item.title}}</div>
                            <div class="nnum">{{item.num}}</div>
                        </div>
                    </div>
                    <div class="jremdsl">
                        <div class="mditem1 "  v-for="(item,key) in kksparr" :key="key">
                            <span class="namrer">{{item.title}}</span>
                            <span class="nnum">{{item.num}}</span>
                        </div>
                        <div class="c"></div>
                        <div class="zksl2">
                            <div class="zkksjh">{{zksl.num}}</div>
                            <span class="zksl3">{{zksl.title}}</span>
                        </div>
                    </div>
                    <div class="kksl2" >
                        <div class="combt1">开卡数量走势</div>
                        <div class="xssjqw5">
                            <div class="f sxsdd">
                                <span class="xsgfdty">销户数量：{{num1}}</span>
                                <span class="xsgfdty">回扣金额：￥{{num2}}</span>
                            </div>
                            <div class="r ryqh">
                                <span :class="types==1 ? 'ris rish' : 'ris'" @click="qiqh(1)">日</span>
                                <span :class="types==2 ? 'ris rish' : 'ris'"  @click="qiqh(2)">月</span>
                            </div>
                            <div class="c"></div>
                        </div>
                        <div id="main1"></div>
                    </div>
                </div>

                <div class="c"></div>
            </div>
            <div class="r w24145">
                <div class="combt">新增门店数据汇总</div>
                <div id="main6"></div>
                <div class="combt">工单审核状态实时监控</div>
                <div id="main7"></div>
                <div class="combt">工单审核效率趋势</div>
                <div id="main89"></div>


            </div>
            <div class="c"></div>
        </div>
    </div>
    <script src="/dp//js/jquery.min.js"></script>
    <script src="/dp/js/jquery.cookie.js"></script>
    <script src="/dp//layer/layui.js"></script>
    <script src="/dp//js/MagicCusJSFun.js"></script>
    <script src="/dp//js/vue.min.js"></script>
    <script src="/dp//js/element-ui/lib/index.js"></script>
    <!-- <script src="/dp//js/swiper-bundle.min.js"></script> -->
    <script src="/dp//js/HttpRequest.js"></script>
    <script src="/dp/js/echarts-master/dist/echarts.min.js"></script>
    <script src="/dp/js/jquery.SuperSlide.2.1.3.js"></script>
    <script src="https://www.jq22.com/demo/jquerywfgd201904052055/js/scroll.js"></script>
</body>
</html>
<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {
                percentage: 20,
                value:"",
                zksl:299,
                mdarr:[
                    {
                        name:"门店名称",
                        num:329
                    },
                    {
                        name:"门店名称",
                        num:329
                    },
                    {
                        name:"门店名称",
                        num:329
                    },
                    {
                        name:"门店名称",
                        num:329
                    },
                    {
                        name:"门店名称",
                        num:329
                    },
                    {
                        name:"门店名称",
                        num:329
                    },
                    {
                        name:"门店名称",
                        num:329
                    },
                    {
                        name:"门店名称",
                        num:329
                    },
                    {
                        name:"门店名称",
                        num:329
                    },
                    {
                        name:"门店名称",
                        num:329
                    },
                    {
                        name:"门店名称",
                        num:329
                    },
                ],
                kksparr:[],
                mdslarr:[],
                fyliast:[],
                zhdata: [],
                totalhk: 0,
                rqtype:1,
                news1: {},
                szll: [],
                newlist: [],
                hyi: 1580,
                hylm: [],
                banner: [],
                jxkc: [],
                hykc: [],
                options: [],
                mdsldata:[]    ,
                lyloadindex: 0,
                city:"全部城区",
                ywry:{},
                kssl:{},
                num1 :0,
                num2 :0,
                types:1,
                list9:[],
                list7:{}
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            qiqh(id){
                this.types = id
                HttpGet("index7?city="+this.city+"&type="+this.types, (res2) => {
                    this.num1=res2.data.num1
                    this.num2=res2.data.num2
                    this.list7=res2.data.data_list
                    this.gettb2()
                })
            },
            changeRegion(e){
                this.city=e
            },
            splitByDot(str) {
                // 检查输入是否为字符串
                if (typeof str !== 'string') {
                    console.warn('输入必须是字符串类型');
                    return [];
                }
                
                // 如果字符串为空，返回空数组
                if (str === '') {
                    return [];
                }
                
                // 使用 split 方法按点号分割
                return str.split('.');
            },
            price(str){
                var arr = this.splitByDot(str)
                return '<span class="sjig">￥' + arr[0] + '</span>.<span class="sjig">' + arr[1] + '</span>'
            },
            getsc(num) {
                var str, arr, res, xsd;
                if (num >= 1) {
                    str = String(num / 60)
                    if (str.indexOf(".") != -1) {
                        arr = str.split(".")
                        xsd = Number('0.' + String(arr[1]))
                        res = arr[0] + '分' + xsd * 60 + '秒'
                    } else {
                        res = arr[0] + '分'
                    }
                } else {
                    res = num;
                }

                return res

            },
            
            updateTime() {
                const now = new Date();
                
                // 格式化时间 (HH:MM:SS)
                const hours = String(now.getHours()).padStart(2, '0');
                const minutes = String(now.getMinutes()).padStart(2, '0');
                const seconds = String(now.getSeconds()).padStart(2, '0');
                const timeString = `${hours}:${minutes}:${seconds}`;
                
                // 格式化日期 (YYYY年MM月DD日)
                const year = now.getFullYear();
                const month = String(now.getMonth() + 1).padStart(2, '0');
                const date = String(now.getDate()).padStart(2, '0');
                const dateString = `${year}年${month}月${date}日`;
                
                // 获取星期几
                const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
                const dayString = `星期${weekdays[now.getDay()]}`;
                $('#currentTime').text(timeString);
                $('#currentDate').text(dateString);
                $('#currentDay').text(dayString);

            },
            init(){
                setInterval(this.updateTime, 1000);
                this.getdata()



                this.gettb7()
                this.gettb89()
            },
            getdata(){
                HttpGet("areaList", (res) => {
                    this.options = res.data.map(item => {
                        return {
                            value: item,
                            name: item,
                        };
                    });
                })
                HttpGet("index1?city="+this.city, (res) => {
                    this.ywry=res.data
                    this.gettb1()
                })
                HttpGet("index2?city="+this.city, (res2) => {
                    this.mdarr=res2.data

                })
                HttpGet("index3?city="+this.city, (res2) => {
                    this.mdsldata=res2.data
                    this.gettb6()
                })
                HttpGet("index4?city="+this.city, (res2) => {
                    this.fyliast=res2.data
                })
                HttpGet("index5?city="+this.city, (res2) => {
                    this.mdslarr=res2.data
                })
                HttpGet("index6?city="+this.city, (res2) => {
                    this.kksparr=res2.data.data_list
                    this.zksl=res2.data.zk
                })
                HttpGet("index7?city="+this.city+"&type="+this.types, (res2) => {
                    this.num1=res2.data.num1
                    this.num2=res2.data.num2
                    this.list7=res2.data.data_list
                    this.gettb2()
                })
                HttpGet("index8?city="+this.city, (res2) => {
                    this.xzmd=res2.data
                    this.gettb6()
                })

                HttpGet("index9?city="+this.city, (res2) => {
                    this.list9=res2.data
                    this.gettb7()
                })


            },
            gettb89(){

                    var chartDom89 = document.getElementById('main89');
                    var myChart89 = echarts.init(chartDom89);
                    var option89;

                    option89 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            legend: {
                data: ['销售额', '增长率'],
                top: 10,
                textStyle: {
                    color: '#333'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#666'
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '',
                    min: 0,
                    // show: false,
                    
                },
                {
                    type: 'value',
                    name: '',

                    min: 0,
                    max: 25,
                    axisLabel: {
                        formatter: '{value} %'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#666'
                        }
                    },
                    splitLine: {
                        show: false
                    }
                }
            ],
            series: [
                {
                    name: '工单审核数量',
                    type: 'bar',
                    barWidth: '40%',
                    data: [120, 132, 101, 134, 190, 230, 210, 182, 191, 234, 290, 330],
                    itemStyle: {
                        color: '#51E9E8'
                    }
                },
                {
                    name: '通过趋势',
                    type: 'line',
                    yAxisIndex: 1,
                    smooth: true,
                    lineStyle: {
                        width: 3,
                        color: '#D3DF18'
                    },
                    symbol: 'circle',
                    symbolSize: 8,
                    data: [5.2, 6.8, 4.5, 8.2, 12.5, 15.3, 13.2, 10.5, 11.8, 14.2, 18.5, 20.3],
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgba(211,223,24,0.4)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(211,223,24,1)'
                                }
                            ]
                        }
                    }
                }
            ]
        };

                    option89 && myChart89.setOption(option89);

                    },
            gettb1(){

                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                xAxis: {
                    type: 'category',
                    data: this.ywry.return_rq
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    data: this.ywry.shop_num_list,
                    type: 'line',
                    lineStyle: {
                        color: '#19DCF6' // 设置线条颜色为绿色
                    },
                    itemStyle: {
                        color: '#ffffff',        // 数据点填充颜色
                        borderColor: '#19DCF6',  // 数据点边框颜色
                        borderWidth: 2,          // 数据点边框宽度
                        borderType: 'solid'      // 边框类型：solid | dashed | dotted
                    }
                    }
                ],
                dataZoom: []
                };

                option && myChart.setOption(option);

            },
            gettb2(){

                var chartDom1 = document.getElementById('main1');
                var myChart1 = echarts.init(chartDom1);
                var option1;

                option1 = {
                    tooltip: {
                        trigger: 'axis', // 触发类型：'item' 数据项 | 'axis' 坐标轴
                        formatter: function(params) {
                            // params 是一个数组，包含当前坐标点的信息
                            return `${params[0].name}<br/>开卡： ${params[0].value}张`;
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.list7.data
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                        data: this.list7.order_num,
                        type: 'line',
                        areaStyle: {}
                        }
                    ]
                };

                option1 && myChart1.setOption(option1);

            },

            gettb6(){

                    var chartDom6 = document.getElementById('main6');
                    var myChart6 = echarts.init(chartDom6);
                    var option6;

                    option6 = {
                        xAxis: {
                            type: 'category',
                            data: this.xzmd.return_rq
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                markPoint: {
                                    symbol: 'rect',
                                    symbolSize: [6, 6],  // 设置正方形大小为6px
                                    symbolOffset: [0, -20],  // 向上偏移，使其位于柱子顶部
                                    itemStyle: {
                                        color: '#ffffff',  // 白色正方形
                                        borderColor: '#2c3e50',
                                        borderWidth: 1
                                    }
                                },
                       
                    
                            data: this.xzmd.shop_num_list,
                            type: 'bar',
                            barWidth: '4px',
                            }
                        ]
                        };

                    option6 && myChart6.setOption(option6);

                    },
                    gettb7(){

            var chartDom7 = document.getElementById('main7');
            var myChart7 = echarts.init(chartDom7);
            var option7= {};

            option7 = {
                legend: {
                    right: "25%",
                    top: 'center',
                    orient: 'vertical',
                    itemGap: 20,
                    textStyle: {
                        color: "#ffffff",
                        fontSize: 14
                    },
                    
                    formatter: function (name,tsd) {
                        const data= this.list9;
                        
                        // 计算总值
                        const total = data.reduce((sum, item) => sum + item.value, 0);
                        
                        // 查找对应项并计算百分比
                        const item = data.find(d => d.name === name);
                        if (item) {
                            const percent = ((item.value / total) * 100).toFixed(1);
                            return `${name}: ${percent}%`;
                        }
                        // return name;
                    },
                },
                series: [
                    {
                    name: 'Nightingale Chart',
                    type: 'pie',
                    roseType: 'area',
                    center: ['20%', '46%'],
                    label: {
                        show: false,  // 显示标签
                        formatter: '{b}: {d}%'  // 显示名称和百分比
                        // 或者使用: formatter: '{b}\n{c} ({d}%)' 显示名称、数值和百分比
                    },
                    labelLine: {
                        show: false  // 显示标签引导线
                    },
                    emphasis: {
                        label: {
                        show: false,
                        fontSize: 16,
                        fontWeight: 'bold'
                        }
                    },
                    data: this.list9,
            }

option7 && myChart7.setOption(option7);

},
            getindex() {
                this.lyloadindex = layer.load(0, { shade: 0.3 })
                HttpGet("/API/Home/Index", (res) => {
                    this.zhdata = res.data
                    this.totalhk = res.data.HangYeHaoKe.length
                    this.news1 = this.zhdata.News[0]
                    console.log(res.data.News[0])
                    layer.close(this.lyloadindex)

                    HttpGet("/API/Help/GetListByCode?Code=HangYeTypes", (res) => {
                        this.hylm = res.data
                    }) 
                })
            },
            
        }
    })

    $(document).ready(function() {
        setTimeout(function() {
            $('.myscroll').myScroll({
                speed: 40, //数值越大，速度越慢
                rowHeight: 46 //li的高度
            });
            $('.myscroll2').myScroll({
                speed: 40, //数值越大，速度越慢
                rowHeight: 72 //li的高度
            });
            // 这里写延时后要执行的代码
            jQuery(".txtScroll-top").slide({
                // mainCell: ".bd ul",
                titCell: ".hd", // 分页导航的容器
                autoPage: true, // 自动分页
                effect: "leftLoop", // 根据实际需求选择效果
                autoPlay: true, // 如果需要自动播放
                vis: 5 // 希望每次显示5个
            });

            console.log('延时执行的操作');

        }, 1000);
        
});
</script>
